<template>
  <body>
    <div class="mian_container">
      <img src="../../assets/背景图.png" width="100%" height="100%" />
      <!-- 头部区域 -->
      <div class="header_box">
        <div>
          <img src="../../assets/城市学院logo.png" alt="" />
          <img src="../../assets/实验室logo.png" alt="" />
        </div>

        <el-row :gutter="20">
          <!-- <el-col :span="25"
            ><el-input>
              <el-button
                slot="append"
                icon="el-icon-search"
                type="primary"
              ></el-button> </el-input
          ></el-col> -->
        </el-row>
      </div>
      <!-- 导航栏区域 -->
      <div class="shortcut_box">
        <div class="short2_box">
          <ul>
            <li>
              <a class="active" href="#a1/a2" @click="tologin">首页</a>
            </li>
            <li>
              <a href="#centeroverview" @click="tocenteroverview">中心概况</a>
            </li>
            <li>
              <a class="news" href="#homenews" @click="tonews">新闻公告</a>
            </li>
            <li>
              <a href="#coursewareresources" @click="toresources">教学资源</a>
            </li>
            <li>
              <a href="#teachingreform" @click="toachievements">成果展示</a>
            </li>
            <li><a href="#PAT" @click="toplatforms">实验平台</a></li>
            <li><a href="#services" @click="toservices">综合服务</a></li>
            <li>
              <a href="#managedresource" @click="toapplication">资源在线申请</a>
            </li>
            <li>
              <a href="#experimentalprojectcard" @click="totiis"
                >教学综合信息系统</a
              >
            </li>
          </ul>
        </div>
      </div>
      <!-- 内容主体区域 -->
      <router-view></router-view>
    </div>
  </body>
</template>

<script>
import md5 from "js-md5";

export default {
  data() {
    return {
    };
  },
  methods: {
    tologin() {
      this.$router.push("/a1/a2");
    },
    tonews() {
      this.$router.push("/homenews");
    },
    tocenteroverview() {
      this.$router.push("/centeroverview");
    },
    toresources() {
      this.$router.push("/coursewareresources");
    },
    toachievements() {
      this.$router.push("/teachingreform");
    },
    toplatforms() {
      this.$router.push("/PAT");
    },
    // toapplication() {
    //   this.$router.push("/server");
    // },
    toapplication() {
      this.$router.push("/applications");
    },
    totiis() {
      this.$router.push("/experimentalprojectcard");
    },
    toservices() {
      this.$router.push("/formDownload");
    },
  },
};
</script>

<style lang="less" scoped>
//less 支持less语法格式
//scoped当前组件内生效，去掉全局生效
.mian_container {
  // background-color: #e8f8fa;
  // background-color: rgb(230, 180, 180);
  height: 2000px;
}
// 头部
.header_box {
  width: 1020px;
  height: 60px;
  // background-color: rgb(158, 19, 19);
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 48px;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 25px;
  > div {
    display: flex;
    align-items: center;
    span {
      margin-left: 35px;
      letter-spacing: 5px;
    }
  }
}
//导航栏
.shortcut_box {
  width: 100%;
  height: 60px;
  background-color: #0e4c92;
  //   border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 123px;
  transform: translate(-50%, -50%);
}
.short2_box {
  width: 1020px;
  height: 60px;
  // background-color: #d3a033;
  //   border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translate(-50%, -50%);
}
.shortcut_box ul {
  list-style-type: none;
  margin: 5px;
  padding-top: 0px;
  overflow: hidden;
  // background-color: #0e4c92;
  padding-inline-start: 0px;
}

.shortcut_box li {
  float: left;
}

.shortcut_box li a {
  display: flex;
  color: white;
  text-align: center;
  padding: 15px 20.5px;
  text-decoration: none;
}

.shortcut_box li a:hover {
  background-color: #106ab5;
}

// 主体功能
.function_box {
  width: 1020px;
  // height: 1750px;
  height: 1700px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 1003px;
  transform: translate(-50%, -50%);
}
//主体区域背景布局颜色
.function_container {
  // background-color: #c0e7f3;
  // background-color: rgb(255, 255, 255);
  height: 100%;
}
</style>
